<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
        }

        .header {
            background-color: #409EFF;
            color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 24px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-name {
            font-weight: bold;
        }

        .logout-btn {
            background-color: transparent;
            color: white;
            border: 1px solid white;
            padding: 5px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .logout-btn:hover {
            background-color: white;
            color: #409EFF;
        }

        .container {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .sidebar {
            width: 220px;
            background-color: white;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            padding: 20px 0;
        }

        .menu-item {
            padding: 15px 25px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .menu-item:hover {
            background-color: #f0f7ff;
            color: #409EFF;
        }

        .menu-item.active {
            background-color: #e1f0ff;
            color: #409EFF;
            border-left: 4px solid #409EFF;
        }

        .main-content {
            flex: 1;
            padding: 25px;
            background-color: #f9f9f9;
        }

        .card {
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: #409EFF;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #f5f7fa;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f5f7fa;
        }

        .action-btn {
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }

        .select-btn {
            background-color: #67C23A;
            color: white;
        }

        .select-btn:hover {
            background-color: #5daf34;
        }

        .update-btn {
            background-color: #409EFF;
            color: white;
        }

        .update-btn:hover {
            background-color: #3a8ee6;
        }

        .drop-btn {
            background-color: #F56C6C;
            color: white;
        }

        .drop-btn:hover {
            background-color: #e05c5c;
        }

        .course-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .course-card {
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 15px;
            transition: all 0.3s;
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .course-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .course-info {
            margin-bottom: 8px;
            color: #666;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            border-radius: 6px;
            width: 500px;
            max-width: 90%;
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .btn {
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }

        .btn-primary {
            background-color: #409EFF;
            color: white;
        }

        .btn-primary:hover {
            background-color: #3a8ee6;
        }

        .btn-cancel {
            background-color: #f5f5f5;
            color: #666;
        }

        .btn-cancel:hover {
            background-color: #e5e5e5;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }

        .loading {
            text-align: center;
            padding: 20px;
        }

        .error-message {
            color: #F56C6C;
            margin-top: 10px;
        }

        .score-input {
            width: 80px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }

        .student-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
</html>

<body>
    <div class="header">
        <h1>教师管理系统</h1>
        <div class="user-info">
            <span class="user-name" id="teacherName">李老师</span>
            <button class="logout-btn" id="logoutBtn">退出登录</button>
        </div>
    </div>

    <div class="container">
        <div class="sidebar">
            <div class="menu-item active" data-page="my-courses">
                <i>📚</i> 我的课表
            </div>
            <!-- 其余 HTML 代码 -->
        </div>
    </div>

    <!-- 引入 JavaScript 文件 -->
    <script src="teacher_test1.js"></script>
</body>
</html>            border-bottom: 1px solid #eee;
        }

        .student-info {
            flex: 1;
        }

        .student-actions {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>教师管理系统</h1>
    <div class="user-info">
        <span class="user-name" id="teacherName">加载中...</span>
        <button class="logout-btn" id="logoutBtn">退出登录</button>
    </div>
</div>

<div class="container">
    <div class="sidebar">
        <div class="menu-item active" data-page="my-courses">
            <i>📚</i> 我的课表
        </div>
        <div class="menu-item" data-page="grade-management">
            <i>📝</i> 成绩管理
        </div>
        <div class="menu-item" data-page="select-courses">
            <i>➕</i> 选课管理
        </div>
        <div class="menu-item" data-page="my-students">
            <i>👨‍🎓</i> 班级学生
        </div>
    </div>

    <div class="main-content">
        <!-- 我的课表页面 -->
        <div id="my-courses-page" class="page-content">
            <div class="card">
                <h2 class="card-title">我的课程</h2>
                <div id="my-courses-container">
                    <div class="loading">加载中...</div>
                    <table style="display: none;">
                        <thead>
                        <tr>
                            <th>课程ID</th>
                            <th>课程名称</th>
                            <th>课时</th>
                            <th>选课时间</th>
                        </tr>
                        </thead>
                        <tbody id="my-courses-table">
                        <!-- 数据将通过JS动态填充 -->
                        </tbody>
                    </table>
                    <div id="my-courses-error" class="error-message" style="display: none;"></div>
                </div>
            </div>
        </div>

        <!-- 成绩管理页面 -->
        <div id="grade-management-page" class="page-content" style="display: none;">
            <div class="card">
                <h2 class="card-title">学生成绩管理</h2>
                <div class="form-group">
                    <label for="course-select">选择课程</label>
                    <select id="course-select" class="form-control">
                        <option value="">请选择课程</option>
                        <!-- 课程选项将通过JS动态填充 -->
                    </select>
                </div>

                <div id="course-students-container" style="margin-top: 20px; display: none;">
                    <h3 class="card-title">学生列表</h3>
                    <div id="students-list">
                        <!-- 学生列表将通过JS动态填充 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 选课管理页面 -->
        <div id="select-courses-page" class="page-content" style="display: none;">
            <div class="card">
                <h2 class="card-title">可选课程</h2>
                <div id="available-courses-container">
                    <div class="loading">加载中...</div>
                    <div class="course-list" id="available-courses-list" style="display: none;"></div>
                    <div id="available-courses-error" class="error-message" style="display: none;"></div>
                </div>
            </div>
        </div>

        <!-- 班级学生页面 -->
        <div id="my-students-page" class="page-content" style="display: none;">
            <div class="card">
                <h2 class="card-title">班级学生</h2>
                <div class="form-group">
                    <label for="student-course-select">选择课程</label>
                    <select id="student-course-select" class="form-control">
                        <option value="">请选择课程</option>
                        <!-- 课程选项将通过JS动态填充 -->
                    </select>
                </div>

                <div id="student-list-container" style="margin-top: 20px; display: none;">
                    <table>
                        <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>成绩</th>
                        </tr>
                        </thead>
                        <tbody id="student-list-table">
                        <!-- 学生列表将通过JS动态填充 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 录入成绩模态框 -->
<div class="modal" id="gradeModal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="modal-title" id="gradeModalTitle">录入成绩</span>
            <button class="close-btn" id="closeGradeModal">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="student-name">学生姓名</label>
                <input type="text" id="student-name" readonly>
            </div>
            <div class="form-group">
                <label for="course-name">课程名称</label>
                <input type="text" id="course-name" readonly>
            </div>
            <div class="form-group">
                <label for="score-input">成绩</label>
                <input type="number" id="score-input" min="0" max="100" step="1" placeholder="请输入成绩">
            </div>
            <input type="hidden" id="score-student-id">
            <input type="hidden" id="score-course-id">
        </div>
        <div class="modal-footer">
            <button class="btn btn-cancel" id="cancelGrade">取消</button>
            <button class="btn btn-primary" id="saveGrade">保存</button>
        </div>
    </div>
</div>

<!-- 选课确认模态框 -->
<div class="modal" id="selectCourseModal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="modal-title">确认选课</span>
            <button class="close-btn" id="closeSelectModal">&times;</button>
        </div>
        <div class="modal-body">
            <p>您确定要选择以下课程吗？</p>
            <div id="selected-courses-list" style="margin: 15px 0; max-height: 200px; overflow-y: auto;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-cancel" id="cancelSelect">取消</button>
            <button class="btn btn-primary" id="confirmSelect">确认</button>
        </div>
    </div>
</div>
<script src="teacher_test1.js"></script>
</body>
</html>
